<!-- eslint-disable no-plusplus -->
<!-- 设备管理-设备故障信息 -->
<template>
  <div class="equipment-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <!-- <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template> -->
    </pageHeader>
    <div class="equipment-detail-header">
      <table border="1" cellspacing="0">
        <tbody>
          <tr>
            <td> 设备编号(公司内部) </td>
            <td> {{ detailList.list.deviceCoding }} </td>
            <td> 设备名称 </td>
            <td> {{ detailList.list.deviceName }} </td>
            <td
              rowspan="6"
              :style="{
                maxWidth: '420px',
                backgroundColor: '#fff'
              }"
            >
              <div
                style="position: relative; cursor: pointer"
                v-if="
                  detailList.list?.equipmentPictures &&
                  detailList.list?.equipmentPictures?.length !== 0
                "
              >
                <a-image-preview-group infinite>
                  <a-space>
                    <a-image
                      v-for="(img, index) in detailList.list.equipmentPictures"
                      :src="img.picture"
                      v-show="index === 0"
                      width="300"
                      :key="img.id"
                    />
                  </a-space>
                </a-image-preview-group>
                <div
                  style="
                    position: absolute;
                    bottom: 10px;
                    right: 30px;
                    background: #afb4bf;
                    width: 30px;
                    color: #fff;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 50px;
                  "
                  >{{ detailList.list.equipmentPictures.length }}</div
                >
              </div>
              <div v-else> 未上传图片 </div>
            </td>
          </tr>
          <tr>
            <td> 设备类型 </td>
            <td>
              {{
                changedeviceTypeData(
                  deviceType.data,
                  detailList.list.deviceTypeId
                )
              }}
            </td>
            <td> 设备规格 </td>
            <td> {{ detailList.list.specification }} </td>
          </tr>
          <tr>
            <td> 设备编号(厂商)</td>
            <td> {{ detailList.list.manufacturerNumber }} </td>
            <td> 设备型号 </td>
            <td> {{ detailList.list.modelNumber }} </td>
          </tr>
          <tr>
            <td> 所属车间 </td>
            <td>
              {{
                workshop.data?.filter(
                  (ele: any) => ele.id === detailList.list.workshopId
                )[0]?.value
              }}
            </td>
            <td> 存放位置 </td>
            <td> {{ detailList.list.storageLocation }} </td>
          </tr>
          <tr>
            <td> 负责人 </td>
            <td>
              {{
                personnelData.data?.filter(
                  (ele: any) => ele.id === detailList.list.responsiblePersonId
                )[0]?.name
              }}
            </td>
            <td> 设备用途 </td>
            <td> {{ detailList.list.deviceUse }} </td>
          </tr>
          <tr>
            <td> 设备使用状态 </td>
            <td
              :style="{
                // color: 'red'
              }"
            >
              {{
                useStateList.list.filter(
                  (ele: any) => ele.id === detailList.list.goodStateId
                )[0]?.name
              }}
            </td>
            <td> 启用状态 </td>
            <td>
              {{ detailList.list.isEnabled ? '启用' : '禁用' }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="equipment-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <equipmentBase v-if="item.key === '1'"></equipmentBase>
          <dynamicRecord v-else-if="item.key === '2'"></dynamicRecord>
          <repairRecord v-else-if="item.key === '3'"></repairRecord>
          <maintenanceRecord v-else-if="item.key === '4'"></maintenanceRecord>
          <maintenancePlan
            :equipmentId="detailList.list.id"
            v-else-if="item.key === '5'"
          ></maintenancePlan>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
      v-model:visible="isChangeState"
      @changeStepsEmit="changeStepsEmit"
      :state="clientDetailList.state"
      :state-list="stateList"
    ></stateStapsModal> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    GetEquipmentState,
    GetEquipmentType
  } from '@/api/equipment-management/base-setting';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { GetEquipmentGoodState } from '@/api/equipment-management/base-setting/index';
  import { GetEquipmentDetail } from '@/api/equipment-management/equipment-list';
  import equipmentBase from '../equipment-add/index.vue';
  import dynamicRecord from './components/equipment-dynamic-record/index.vue';
  import repairRecord from './components/equipment-repair-record/index.vue';
  import maintenanceRecord from './components/equipment-maintenance-record/index.vue';
  import maintenancePlan from './components/equipment-maintenance-plan/index.vue';

  const route = useRoute();
  const deviceType: any = reactive({ data: [] });
  const id = Number(route.query.id); // 设备id

  const title: string = '设备故障信息';

  const breadCrumb: string[] = ['设备管理', '设备列表', '设备故障信息'];

  // 储存详情数据
  const detailList: any = reactive({
    list: { equipmentPictures: [] }
  });

  // 储存设备使用状态数据
  const useStateList = reactive<any>({
    list: []
  });

  let useStateName = ref(''); // 设备使用状态名称
  let isEnabled = ref(''); // 启用状态名称
  const personnelData: any = reactive({ data: [] });
  const workshop = reactive({
    data: [
      { id: 1, value: '车间A' },
      { id: 2, value: '车间B' },
      { id: 3, value: '车间C' },
      { id: 4, value: '车间D' }
    ]
  });
  const getData = async () => {
    try {
      const res2 = await GetPersonnelinformation({
        page: 1,
        size: -1
      });
      const res3 = await GetEquipmentGoodState({
        type: 3 // 默认传3
      });
      const res1 = await GetEquipmentType();
      const res = await Promise.all([
        GetEquipmentDetail({
          id,
          typeId: 0
        }),
        GetEquipmentGoodState({
          type: 3
        })
      ]);
      personnelData.data = res2.content.data;
      deviceType.data = res1;
      detailList.list = res[0];
      useStateList.list = res[1];
      // 将表格中的设备使用状态和启用状态转换成正确的名称
      for (let i of useStateList.list) {
        if (detailList.list.useState === i.id) {
          useStateName.value = i.name;
          isEnabled.value = i.id === 11 ? '停用' : '启用';
        }
      }
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();
  const changedeviceTypeData = (arr: any, id: number): string => {
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < arr.length; i++) {
      const currentId = arr[i].id;
      if (currentId === id) {
        return arr[i].name;
      }
      if (arr[i].children) {
        const foundNode = changedeviceTypeData(arr[i].children, id);
        if (foundNode) {
          return foundNode;
        }
      }
    }
    return '';
  };
  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '基本信息'
    },
    // {
    //   key: '2',
    //   title: '设备动态记录'
    // },
    {
      key: '3',
      title: '设备维修记录'
    },
    {
      key: '4',
      title: '设备保养记录'
    },
    {
      key: '5',
      title: '设备保养计划'
    }
  ]);
</script>

<style scoped lang="less">
  .equipment-detail {
    &-header {
      padding: 10px 30px;
      table {
        width: 100%;
        border-color: #f9f9f9;
        tr {
          height: 58px;
          text-align: center;
        }
        td:nth-child(odd) {
          background-color: #f5f7fa;
          width: 200px;
        }
        td:nth-child(even) {
          width: 389px;
        }
      }
    }
  }
</style>
